<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组API</title>
  </head>

  <body>
    <script>
      function demoPush() {
        var arr = ["pigs", "goats", "sheep"];

        // 追加若干个元素到数组的末尾 并返回数组的新长度
        var count = arr.push("cows");
        console.log(count); //4

        arr.push("chickens", "cats", "dogs");
        console.log(arr); //["pigs", "goats", "sheep"，"cows"，"chickens", "cats", "dogs"]
      }
      // demoPush()

      /* pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。 */
      function demoPop() {
        var arr = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];
        console.log(arr.pop()); //"tomato"
        console.log(arr); //["broccoli", "cauliflower", "cabbage", "kale",]
        arr.pop();
        console.log(arr); //["broccoli", "cauliflower", "cabbage"]
      }
      // demoPop()

      /* unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度 */
      function demoUnshift() {
        var arr = [1, 2, 3];
        console.log(arr.unshift(4, 5)); //5 数组的新长度
        console.log(arr); //[4,5,1,2,3] 4,5插到原数组的最前面
      }
      // demoUnshift();

      /* shift() 方法从数组中删除第一个元素，并返回该元素的值 */
      function demoShift() {
        var arr = [1, 2, 3];
        var firstElement = arr.shift();
        console.log(arr); //[2,3]
        console.log(firstElement); //1
      }
      // demoShift()

      /* splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被删除的内容 */
      function demoSplice() {
        var arr = ["Jan", "March", "April", "June"];

        // 光标放在1号元素之前 向后删除0个元素 原地插入"Feb"
        var ret = arr.splice(1, 0, "Feb");
        console.log(arr); //["Jan", "Feb","March", "April", "June"]
        console.log(ret); //[]

        // 光标放在4号元素之前 向后删除1个元素 原地插入"May"
        ret = arr.splice(4, 1, "May");
        console.log(arr); //["Jan", "Feb","March", "April", "May"]
        console.log(ret); //[June]
      }
      // demoSplice();

      /* 原地反转数组 */
      function demoReverse() {
        var arr = ["我", "的", "圆", "珠", "笔"];
        var reversedArr = arr.reverse();
        console.log(reversedArr); //['笔', '珠', '圆', '的', '我']
        console.log(arr); //['笔', '珠', '圆', '的', '我']
      }
      //   demoReverse()

      /* 
      sort() 方法用原地算法对数组的元素进行排序，并返回数组。 
      默认排序方式：所有元素转字符串 然后逐个比较首字符的码点 （首字符码点相同则继续比较第二个字符）
      */
      function demoSort() {
        var arr = ["March", "Jan", "Feb", "Dec"];
        arr.sort();
        console.log(arr); //["Dec","Feb","Jan","March"]

        var arr2 = [1, 30, 4, 21, 100000];
        arr2.sort();
        console.log(arr2); //[1,100000,21,30,4]
      }
      //   demoSort()

      function demoSortX() {
        var arr = [40, 1, 5, 200];
        arr.sort(function (a, b) {
          // 返回值为负数则a在前（升序排列）
          // 返回值为0则a,b顺序保持不变
          // 返回值为正数则b在前（降序排列）
          // return a - b
          return b - a;
        });
        console.log(arr);
      }
      // demoSortX()

      function demoSortXX() {
        var arr = [
          { name: "大耳儿", iq: 130, height: 163 },
          { name: "关二哥", iq: 110, height: 208 },
          { name: "环眼贼", iq: 140, height: 185 },
        ];

        function sortByIq(a, b) {
          return a.iq - b.iq;
        }
        function sortByHeight(a, b) {
          return a.height - b.height;
        }
        arr.sort(sortByHeight);
        console.log(arr);
      }
      //   demoSortXX();

      /* concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 */
      function demoConcat() {
        var array1 = ["a", "b", "c"];
        var array2 = ["d", "e", "f"];

        // 拼接arr1与arr2的所有元素 生成一个新数组副本
        var array3 = array1.concat(array2);
        console.log(array3); //['a', 'b', 'c', 'd', 'e', 'f']

        // concat不会更改原始数据
        console.log(array1, array2); //['a', 'b', 'c']['d', 'e', 'f']

        // 可以拼接任意多个数组或元素的大乱炖，最终形成一个新的包含所有元素的大数组
        var array4 = array1.concat(array2, "g", "h", ["i", "j", "k"], "l");
        console.log(array4); //['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']
      }
      //   demoConcat();

      /*  */
      function demoJoin() {
        var elements = ["Fire", "Air", "Water"];

        console.log(elements.join());
        // expected output: "Fire,Air,Water"

        console.log(elements.join(""));
        // expected output: "FireAirWater"

        console.log(elements.join("-"));
        // expected output: "Fire-Air-Water"
      }
      //   demoJoin()

      function demoIndexOf() {
        var beasts = ["ant", "bison", "camel", "duck", "bison"];

        console.log(beasts.indexOf("bison"));
        // expected output: 1

        // start from index 2
        console.log(beasts.indexOf("bison", 2));
        // expected output: 4

        console.log(beasts.indexOf("giraffe"));
        // expected output: -1
      }

      function demoIncludes() {
        var array1 = [1, 2, 3];

        console.log(array1.includes(2));
        // expected output: true

        var pets = ["cat", "dog", "bat"];

        console.log(pets.includes("cat"));
        // expected output: true

        console.log(pets.includes("at"));
        // expected output: false
      }
    </script>
  </body>
</html>
